<template>
	<div class="zh-patch">
		<nav-header></nav-header>
		<div class="zh-table"
			v-loading="loading.status"
	    	:element-loading-text="loading.txt"
		>
			<div class="zh-table-open clear">
				<div class="zh-open-left fl">
					<div class="open-width" style="width: 270px">
						<el-input v-model="listParam.keyword" placeholder="请输入文件名搜索"></el-input>
					</div>
					<el-button type="primary" @click="searchFunc">搜索</el-button>
				</div>
				<div class="zh-open-right fr">
					<el-button type="primary" @click="addPatchBox">新增</el-button>
					<el-button type="danger" @click="deleteMuilt_confirm">批量删除</el-button>
				</div>
			</div>
			<div class="zh-table-contents">
				<div class="zh-table-contents-tip">当前系统版本：4276eac</div>
				<el-table
				    :data="listData"
				    border
				    @selection-change="tableSelectionChange"
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      type="selection"
				      width="50"
				      align="center"
				      fixed>
				    </el-table-column>
				    <el-table-column
				      prop="name"
				      label="文件名"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="valid_version"
				      label="允许安装版本"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="diff_version"
				      label="补丁版本跨度"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="create_time"
				      label="上传时间"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="comment"
				      label="注释"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop=""
				      label="状态"
				      align="center"
				      show-overflow-tooltip
				      >
				     	 <template slot-scope="scope">
				      	  <div v-html="getStatus(scope.row.status)"></div>
				      	</template>
				    </el-table-column>
				    	
				    <el-table-column
				      prop="5"
				      label="操作"
				      align="center"
				      width="130"
				      show-overflow-tooltip
				      >
	      		      	<template slot-scope="scope">
	      		      		
	      	      	       	<template v-if="parseInt(scope.row.status) === 1">
	      	      	       		 <el-button @click="" type="text">安装</el-button>	
	      	      	       	</template>
	      	      	    	<template v-if="parseInt(scope.row.status) === 1 || parseInt(scope.row.status) === 2 || parseInt(scope.row.status) === 3">
	      		      			 <el-button @click="" type="text">下载</el-button>
	      		      		</template>
	      	      	       	<el-button @click="delete_confirm(scope.row)" type="text" class="delete-button">删除</el-button>
	      	      	    </template>
				    </el-table-column>
				</el-table>
				<div class="table-pagination" v-if="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="listParam.page_index"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="listParam.page_size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button 
							@click="getList"
							type="primary" icon="el-icon-refresh" 
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>
		 <transition name="el-fade-in-linear" >
			<div class="masking" :class="{ activeLive: isActive }">
				<div class="maskingBox">
					<div class="masking_h">
						<span>补丁包上传</span>
						<i class="el-icon-close" @click="patchClose"></i>
					</div>
					<div class="masking_c">
						
						<div class="zh-upload">	
						   	<uploader :options="uploadOptions" :autoStart="true" ref="uploader" :file-status-text="statusText" @file-added="fileAdd" @file-removed="fileRemoved" @file-success="fileSuccess" @file-error="fileFail"  class="uploader-example">
							    <uploader-unsupport></uploader-unsupport>
							    <uploader-btn :directory="false" :attrs="attrs" v-if="selectFileShow" :single="true">选择文件（仅支持.sh的补丁包文件）</uploader-btn>
							    <uploader-list></uploader-list>
							</uploader>
							
						</div>
					</div>
				</div>
			</div>
		</transition>

	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
		    	loading:{
					status:false,
					txt:'获取数据...',
				},
		    	isActive: true,
		    	selectFileShow:true,//是否显示选择文件按钮
		    	dialogPatch:false,
		        listData:[],
		    	listParam:{
		       		keyword: '',
		       		page_index:1,
		       		page_size:10,
		        },
		        total_number:0,
		        selected:[],
		        statusArr:{1:'可安装',2:'不可安装',3:'开发通道',4:'文件已损坏'},
		        statusText: {
			      	success: '上传成功',  
			      	error: '上传出错',  
			     	uploading: '正在上传...',  
			      	paused: '暂停',  
			      	waiting: '等待上传'  
				},
				selectFileOrNot:false,  //是否选中文件
			    uploadOrNot:false, 		//是否已经上传
			    uploadInfo:{
					file_name:'',
					file_path:'',
					file_size:0
				},
				attrs: {
			      	accept: [".sh"]
			    },
		    	uploadOptions: {
			          target: this.BASE_URL+'/api/system/patch_upload',
			          testChunks: false,
			          headers:{Authorization : `Bearer `+this.$g.access_token},
			    },
		        fileList: [],
		    }
		},
		created(){
			this.getList();
	    },
	    
	    mounted () {  
			// 获取uploader对象  
			this.$nextTick(() => {  
		    	window.Uploader = this.$refs.uploader.uploader  
			})
		} ,
		methods: {
			searchFunc(){
				this.listParam.page_index = 1;
				this.getList();
			},
			addPatchBox(){
				this.selectFileShow = true;
				this.isActive = false;
			},
			
			patchSave(){

			},
			//上传成功的事件  
			fileSuccess (rootFile, file, message, chunk) { 
				this.isActive = true;
				Uploader.cancel();
                var mess = eval('(' + message + ')');
                mess = handleResponseData( mess );
                
			 	if(parseInt( mess.data.status ) ===1 ){
			  		this.uploadOrNot = true;
			  		this.uploadInfo.file_name = mess.data.file_name;
			  		this.uploadInfo.file_path = mess.data.file_path;
			  		this.uploadInfo.post_fix = mess.data.post_fix;
			  		this.patchSave();
			  }
			},
			fileFail( rootFile, file, message, chunk ){
                var mess = eval('(' + message + ')');
                
				if( parseInt( mess.error ) === 401 && this.uploadRetryTimes > 0){
					let callbcak = ( data=>{
						this.uploadRetryTimes--;
						Uploader.retry( file );
	            	})
					this.get_access_token( callbcak );
				}else if(parseInt( mess.code ) === 400){
					this.$message.error(mess.msg);
					setTimeout(()=>{
						Uploader.cancel();
					},1000)
					
				}else{
					this.$message.error(mess.msg);
				}
			},
			fileAdd( file,fileList ){
				this.uploadInfo.file_size = file.size;
				this.selectFileOrNot = true;
				this.selectFileShow = false;
			},
			fileRemoved(file){
				this.selectFileOrNot = false;
				this.selectFileShow = true;
			},
			fileUpload(){
				Uploader.upload();
			},
			patchClose(){
				//是否已经开始 && 是否已经删除文件
				if( this.$refs.uploader.started && this.$refs.uploader.fileList.length > 0){
					Uploader.pause();
					let yes = ( data => {
						Uploader.cancel();
						this.isActive = true;
					})
					let cancel = ( data => {})
					this.e_confirm({yes:yes,cancel:cancel,txt:'确定要终止补丁包上传吗？'});
				}else if(this.$refs.uploader.fileList.length > 0){
					let yes = ( data => {
						Uploader.cancel();
						this.isActive = true;
					})
					let cancel = ( data => {})
					this.e_confirm({yes:yes,cancel:cancel,txt:'确定要取消补丁包上传吗？'});
				}else{
					this.isActive = true;
				}
				
			},
			getStatus(val){
				return this.statusArr[parseInt(val)];
			},
			 getList(){
			 	this.loading.status = true;
            	let success = (data=>{
            		this.loading.status = false;
            		this.listData = data.data.data;
            		this.total_number = data.data.data_sum;
            	})
            	let fail = (data=>{
            		this.loading.status = false;
            		this.$message.error(data.msg)
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/system/package_get',{params: this.listParam,func:{success:success,fail:fail}})
            },
		    delete(id){
		    	let success = ( data => {
		    		this.$message.success(data.msg)
					this.getList();
				});
		    	this.$ajax.delete('api/system/package',{params:{id:id},func:{success:success}})
		    },
		    delete_confirm(obj){
				let yes = ( data => {
					this.delete(obj.id);
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 删除吗？'});

			},
			deleteMuilt_confirm(){
				if( this.selected.length === 0 ) {
					this.$message.warning("请选择要删除的项");
					return false;
				}
				let yes = ( data => {
					this.muilDelete();
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定要删除选中的项吗？'});

			},
			muilDelete(){
				var ids = [];
				for (var i = this.selected.length - 1; i >= 0; i--) {
					ids.push(this.selected[i].id)
				}
				this.delete(ids);
			},
				//选中
		    tableSelectionChange(val) {
                this.selected = val;
            },
		     handleSizeChange(val) {
		     	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
		},
  	}
</script>
<style lang="scss">
	.zh-patch {
		.zh-table-contents-tip {
			height: 30px;
			line-height: 30px;
			border-top: 1px solid #e6e6e6;
		}
		.el-table__body-wrapper table tbody {
			td:nth-child(7) {
				padding: 0;
			}
		}
	}
	.masking{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: .5s;
		background: rgba(0,0,0,.3);
		z-index: 4;
		.maskingBox{
			position: absolute;
			top: 20%;
			left: 50%;
			width: 800px;
			margin-left: -400px;
			background: #fff;
		}
		.masking_h{
			padding: 10px 15px;
			background: #348EFC;
			text-align: center;
			text-align-last: justify;
			>span,
			>i{
				font-size: 16px;
				text-align-last: initial;
				display: inline-block;
				vertical-align: middle;
				color: #fff;
			}
			>i{
				cursor: pointer;
			}
		}
		.masking_c{
			padding: 15px;
		}

	}
	.activeLive{
		opacity: 0;
		visibility: hidden;
	}
	.zh-upload{
		padding-bottom: 0px;
	}
</style>